const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = { 
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // 改为相对路径，避免file协议下绝对路径错误
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: 8080,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  },
  css: {
    sourceMap: process.env.NODE_ENV === 'development',
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/styles/variables.scss";`
      },
      postcss: {
        postcssOptions: {
          plugins: [
            require('autoprefixer')({
              overrideBrowserslist: ['last 2 versions', 'ie >= 10']
            })
          ]
        }
      }
    }
  },
  chainWebpack: config => {
    // 配置thread-loader和cache-loader（链式配置更安全）
    config.module.rule('js')
      .test(/\.js$/)
      .use('thread-loader')
        .loader('thread-loader')
        .options({ workers: 2 })
        .end()
      .use('cache-loader')
        .loader('cache-loader')
        .options({ cacheDirectory: path.resolve(__dirname, '.cache') })
        .end()
      .use('babel-loader')
        .loader('babel-loader')
        .options({ presets: [['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]] });

    // 原有Babel转译配置
    config.module.rules.push({
      test: /\.js$/, 
      exclude: /node_modules/, 
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', {
              useBuiltIns: 'usage',
              corejs: 3
            }]
          ]
        }
      }
    });
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(new CompressionPlugin({ 
        test: /\.(js|css|html|svg)$/, 
        threshold: 8192, 
        minRatio: 0.8 
      }));
    }
  },
  chainWebpack: config => {
    // 原有别名配置
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))
      .set('@styles', path.resolve(__dirname, 'src/styles'));

    // 配置vue-loader（补充热更新选项）
    config.module.rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.hotReload = process.env.NODE_ENV === 'development'; // 开发环境启用热更新
        return options;
      });
    
    // 改为通过vue-loader的样式选项配置（更合理）
    config.module.rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.hotReload = process.env.NODE_ENV === 'development';
        // 直接在vue-loader中配置scoped样式的类名生成规则（替代css-loader的modules配置）
        options.compilerOptions = {
          ...options.compilerOptions,
          scopedId: (hash) => `[name]__[local]--${hash}`
        };
        return options;
      });

    // 配置url-loader/file-loader（调整图片资源阈值，修复options未定义问题）
    config.module.rule('images') // 匹配Vue CLI默认的图片规则
      .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({ mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false }, pngquant: { quality: [0.65, 0.90], speed: 4 }, gifsicle: { interlaced: false }, webp: { quality: 75 } })
        .end() // 在url-loader之前添加image-webpack-loader
    // 匹配Vue CLI默认的图片规则
      .use('url-loader')         // 获取url-loader的use配置（名称需与Vue CLI默认一致）
      .loader('url-loader')      // 明确使用url-loader
      .tap(options => {
        if (!options) options = {}; // 防止options为undefined
        options.limit = 10240;      // 10KB以下转base64
        options.fallback = {        // 明确回退到file-loader
          loader: 'file-loader',
          options: { name: 'static/img/[name].[hash:8].[ext]' }
        };
        return options;
      });

    // 原有HTML插件CDN配置
    config.plugin('html').tap(args => {
      args[0].cdn = process.env.NODE_ENV === 'production' ? {
        css: [
          'https://cdn.jsdelivr.net/npm/element-ui@2.15.10/lib/theme-chalk/index.css'
        ],
        js: [
          'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',
          'https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.min.js',
          'https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js',
          'https://cdn.jsdelivr.net/npm/element-ui@2.15.10/lib/index.js'
        ]
      } : {};
      return args;
    });
  }
};